import { createElements, define, itag } from "../itag/index.js";
import { CustomFieldElement } from "./CustomFieldElement.js";
import { FixFieldElement } from "./FixFieldElement.js";
import { HexFieldElement } from "./HexFieldElement.js";
import { NumberFieldElement } from "./NumberFieldElement.js";
import type { ResponseOption } from "./ResponseOption.js";
import { StringFieldElement } from "./StringFieldElement.js";
import * as styles from "./styles.js";

export class ResponseDetailElement extends HTMLDivElement {
    readonly #elms = createElements({
        title: "h3",
        description: "p",
        container: "div",
    });

    constructor() {
        super();
        const sr = this.attachShadow({ mode: "closed" });
        sr.adoptedStyleSheets.push(styles.sheet);
        itag`
${sr}
    ${this.#elms.title}
    ${this.#elms.description}
    ${this.#elms.container} .${styles.fieldList}
`;
    }

    show(option: ResponseOption) {
        this.#elms.title.textContent = option.name ?? "";
        this.#elms.description.textContent = option.description ?? "";
        this.#elms.container.innerHTML = "";
        for (const field of option.fields) {
            switch (field.kind) {
                case "equal": {
                    const elm = new FixFieldElement();
                    elm.option = field;
                    this.#elms.container.appendChild(elm);
                    break;
                }
                case "custom": {
                    const elm = new CustomFieldElement();
                    elm.option = field;
                    this.#elms.container.appendChild(elm);
                    break;
                }
                case "string": {
                    const elm = new StringFieldElement();
                    elm.option = field;
                    this.#elms.container.appendChild(elm);
                    break;
                }
                case "hex": {
                    const elm = new HexFieldElement();
                    elm.option = field;
                    this.#elms.container.appendChild(elm);
                    break;
                }
                default: {
                    const elm = new NumberFieldElement();
                    elm.option = field;
                    this.#elms.container.appendChild(elm);
                    break;
                }
            }
        }
    }
}

define("response-detail", ResponseDetailElement, {
    extends: "div",
});
